<template>
  <div class="pageBox">
    <head-component title="区域地图"></head-component>
    <div class="content" ref="mapBox" id="container"></div>
  </div>
</template>

<script type="text/ecmascript-6">
import { defineComponent, onMounted, onUnmounted, ref } from "vue";
import headComponent from "../../components/headComponent.vue";
import BMapGL from "BMapGL";
import { post } from "../../untils/request";

export default defineComponent({
  components: {
    headComponent,
  },
  setup() {
    const mapBox = ref(null);

    let map = null;

    // 获取地图标点
    function getMapMarker() {
      post("/portal", {
        module: "User",
        interface: "9002",
      }).then((res) => {
        if (map) {
          if (res.data[0]) {
            map.centerAndZoom(
              new BMapGL.Point(res.data[0].lng, res.data[0].lat),
              11
            );
          }
          res.data.forEach((item) => {
            drawMarker(item.lng, item.lat);
          });
        }
        // console.log("res -> ", res);
      });
    }

    // 初始化地图
    function initMap() {
      map = new BMapGL.Map(mapBox.value);
      map.enableScrollWheelZoom(true);
      // 获取地图标点
      getMapMarker();
    }

    // 绘制地图标点
    function drawMarker(lng, lat) {
      // 在地图上添加点标记
      map.addOverlay(new BMapGL.Marker(new BMapGL.Point(lng, lat)));
    }

    // 初始化
    onMounted(initMap);

    // 销毁
    onUnmounted(() => {
      if (map) {
        map.destroy();
        map = null;
      }
    });

    return {
      mapBox,
    };
  },
});
</script>

<style scoped lang="less">
.pageBox {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-top: 88px;
  .content {
    width: 100%;
    height: calc(100vh - 88px);
  }
}
</style>